<template>
  <div class="login">
    <div class="main">
      <img src="@/assets/images/login/login_left.gif" class="left_img" />
      <div class="right">
        <div class="form">
          <div class="item">
            <div class="label">用户名</div>
            <div class="box da_fc">
              <img src="@/assets/images/login/1.svg" class="form-box_icon" />
              <input type="text" placeholder="请输入用户名" v-model="form.username" />
            </div>
          </div>
          <div class="item">
            <div class="label">密码</div>
            <div class="box da_fc">
              <img src="@/assets/images/login/2.svg" class="form-box_icon" />
              <input type="password" placeholder="请输入密码" v-model="form.password" />
            </div>
          </div>
          <div class="item">
            <div class="label">验证码</div>
            <div class="box daj_fcsb">
              <div style="display: flex">
                <img src="@/assets/images/login/2.svg" class="form-box_icon" />
                <input type="text" placeholder="请输入验证码" v-model="form.code" />
              </div>
              <!-- <img :src="codeImg" class="box_code" @click="fetchCode" /> -->
            </div>
          </div>
          <div class="down">
            <div class="btn" @click="login">登录</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// import { getCode } from "@/api/login";
import { ref, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import cache from "@/utils/cache";
import { useLoginStore } from "@/store/login";

const router = useRouter();
const loginStore = useLoginStore();
const codeImg = ref("");
const form = reactive({
  username: "",
  password: "",
  uuid: "",
  code: "",
});

onMounted(() => {
  // fetchCode();
});

// 获取验证码
const fetchCode = () => {
  getCode().then((res) => {
    codeImg.value = "data:image/gif;base64," + res.img;
    form.uuid = res.uuid;
  });
};

// 登录
const login = () => {
  loginStore.getToken(form).then((res) => {
    const defaultPath = loginStore.getDefaultPath()
    router.push(defaultPath);
  });
};
</script>
<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #081116 0%, #0a2838 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("@/assets/images/login/login_bg.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 100%;
}

.main {
  width: vw(1100);
  height: vh(625);
  display: flex;
  border: 2px solid;
  border-image: linear-gradient(180deg,
      rgba(178, 220, 76, 0.74),
      rgba(178, 220, 76, 0)) 2 2;
}

.left_img {
  width: vw(550);
  height: vh(625);
}

.right {
  width: vw(550);
  background: url("@/assets/images/login/login_right.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 100%;
  // border-radius: 0 0 vw(25) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form {
  width: vw(443);
}

.item {
  margin-bottom: vh(29);
}

.label {
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: vw(1);
  margin-left: vw(13);
}

.da_fc {
  display: flex;
  align-items: center;
}

.daj_fcsb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box {
  width: vw(442);
  height: vh(56);
  background: rgba(0, 0, 0, 0.22);
  border-radius: vw(6);
  border: 1px solid rgba(255, 255, 255, 0.45);
  margin-top: vh(8);
}

.down {
  padding-top: vh(27);
}

.form-box_icon {
  width: vw(25);
  margin-left: vw(17);
}

.box_code {
  width: vw(88);
  height: vh(38);
  margin-right: vw(11);
}

input {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: vw(16);
  color: #ffffff;
  background: none;
  outline: none;
  border: none;
  margin-left: vw(15);
}

.btn {
  width: vw(443);
  height: vh(56);
  background: #b2dc4c;
  border-radius: 7px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 24px;
  color: #000000;
  text-align: center;
  line-height: vh(56);
  letter-spacing: vw(2);
  cursor: pointer;
}
</style>